<!DOCTYPE html>
<html>
    <head>
        <title>Live Test</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/jquery.validity.css" />
        <style>
            html { padding:4em; }
            .hidden { display:none; }
        </style>
    </head>
    <body>
        <div class="row-fluid">
            <div class="span6">
                <h5>Form code:</h5>
                <pre id="form-code-pre" contenteditable=true></pre>
            </div>
            <div class="span6">
                <h5>Validation code:</h5>
                <pre id="validation-code-pre" contenteditable=true></pre>
            </div>
        </div>
        <hr/>
        <div class="row-fluid">
            <form id="test-form" action="">
                <div id="form-content"></div>
                <div>
                    <input id="test-submit" type="button" value="Submit" />
                </div>
            </form>
        </div>
        <div id="success-message" class="row-fluid hidden">
            Validation passed!
        </div>
        <script src="js/jquery-1.9.0.min.js"></script>
        <script src="js/base64.js"></script>
        <script src="../build/jquery.validity.js"></script>
        <script src="js/demo.js"></script>
    </body>
</html>
